import { CustomSubTitle } from "@/components/customTitle";
import { Descriptions } from "antd";
import vipBookingStore from "@/store/vipbookingStore";

const LabelStyle = {
  fontFamily: "Roboto",
  fontSize: "14px",
  fontWeight: "400",
  lineHeight: "21px",
  color: "#696767",
  paddingBottom: "0px",
};

const ContentStyle = {
  fontFamily: "Roboto",
  fontSize: "16px",
  fontWeight: "400",
  lineHeight: "24px",
  color: "#202020",
};

interface BookibfInfo {
  data?: any;
}

const BookibfInfo = ({ data }: BookibfInfo) => {
  const { vipBookingData } = vipBookingStore();
  const basicInfo = data || vipBookingData?.parkingInfo || {};

  return (
    <>
      <CustomSubTitle>Booking Information</CustomSubTitle>
      <Descriptions
        layout="vertical"
        labelStyle={LabelStyle}
        contentStyle={ContentStyle}
        column={4}
      >
        <Descriptions.Item label="Vehicle Type">
          {basicInfo?.vehType || "Private Car"}
        </Descriptions.Item>
        <Descriptions.Item label="License Plate Number">
          {basicInfo?.lpnNo || "AC123"}
        </Descriptions.Item>
        <Descriptions.Item label="Octopus No.">
          {" "}
          {basicInfo?.octopus || "70000111"}{" "}
        </Descriptions.Item>
        <Descriptions.Item label="Car Park">
          {basicInfo?.carParkEnName || "Car Park 1"}{" "}
        </Descriptions.Item>
        <Descriptions.Item label="Parking Period">
          {basicInfo?.duration}
        </Descriptions.Item>
        <Descriptions.Item label="Eligible Month">
          October 2024
        </Descriptions.Item>
      </Descriptions>
    </>
  );
};

export default BookibfInfo;
